<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
    <div class="ui-mode-container ui-mode-box flex-col">
        <div class="ui-header-item gradient">
            <div class="ui-header-arraw prev" @click="handleHistory" @touchstart.stop>
                <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
            </div>
            <div class="ui-header-title">APP相关功能</div>
            <div class="ui-header-arraw next flex-row align-center" @touchstart.stop @click="handleHome">
                <i class="iconfont icon iconi-home"></i>
            </div>
        </div>
        <div class="ui-mode-content flex1" ref="scroll">
            <template v-if="pageStatus">
                <div class="mt-user-info">
                    <div class="item flex-row align-center">
                        <div class="label flex1">APP版本号</div>
                        <span class="value">{{version}}</span>
                    </div>
                    <!-- 分享功能 -->
                    <div class="item flex-row align-center" @touchstart.stop @click="show(false,'showShare')">
                        <div class="label flex1">分享功能</div>
                        <span class="value">点击demo</span>
                    </div>
                    <!-- 扫码功能入口 -->
                    <div class="item flex-row align-center" @click="goPage({name:'修改姓名',path:'/my/app/scan'})">
                        <div class="label flex1">扫码功能</div>
                        <span class="value">点击查看</span>
                        <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
                    </div>
                    <!-- 图片上传功能入口 -->
                    <div class="item flex-row align-center" @click="goPage({name:'修改姓名',path:'/my/app/upload'})">
                        <div class="label flex1">图片上传</div>
                        <span class="value">点击查看</span>
                        <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
                    </div>
                     <!-- app、小程序、H5之间的跳转 -->
                    <div class="item flex-row align-center" @click="goMiniProgramPage({jumpUrl:'/pages/pay/pay?orderId=123456&param1=test&param2=test2',backUrl:''})">
                        <div class="label flex1">APP小程序H5跳转</div>
                        <span class="value">点击跳转</span>
                        <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
                    </div>
                    <!-- 查看APP有没有获取到H5本地存储 -->
                    <div class="item flex-row align-center" @click="checkLocalStorage">
                        <div class="label flex1">查看H5本地存储</div>
                        <span class="value">点击查看</span>
                        <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
                    </div>
                    <!-- 微信绑定 -->
                    <div class="item flex-row align-center" @touchstart.stop @click="goWechart">
                        <div class="label flex1">绑定微信</div>
                        <span class="value">{{bindText}}</span>
                        <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
                    </div>
                    <!-- 退出登录 -->
                    <div class="item flex-row align-center" @click="loginout">退出登录</div>
                </div>
            </template>
        </div>
        <transition name="app_dialog">
            <div class="mt-master-container share" v-if="showShare" @click="close('showShare')">
                <div class="mt-master-content" @click.stop>
                    <div class="mt-master-cancel flex-row align-center-col" @touchstart.stop @click="close('showShare')">
                        <div></div>
                    </div>
                    <div class="mt-master-wrap">
                        <div class="share-title">分享到</div>
                        <div class="share-wrap flex-row align-center-row">
                            <div class="share-item" @touchstart.stop @click="handleNativeShare('weixin')">
                                <img src="@/assets/images/common_we_icon.png">
                                <p>微信好友</p>
                            </div>
                            <div class="share-item" @touchstart.stop @click="handleNativeShare('weixin_wxcircle')">
                                <img src="@/assets/images/common_quan_icon.png">
                                <p>朋友圈</p>
                            </div>
                        </div>
                    </div>
                    <div class="cancel" @touchstart.stop @click="close('showShare')">取消</div>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
import mixinShare from '@/views/content/mixins/share';
import {
    LocalStorage
} from '@/utils/storage';
export default {
    name: 'my',
    data(){
        return {
            public_agent_info:{},
            public_user_info:{},
            version:'',
            showShare:false,
            bindText:''
        };
    },
    mixins:[
        mixinCommon,
        mixinRequest,
        mixinShare
    ],
    components:{
    },
    computed:{
    },
    watch:{
        resourceLoaded:{
            handler(flag){
                flag&&this.$nextTick(this.init);
            },
            immediate:true
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        /*
         * 初始化
         */
        init(){
            if(this.isAPP){
                this.$native.getAppVersion(data=>{
                    if(data){
                        this.version=data;
                    }else{
                        this.version='未返回';
                    }
                });
            }
            this.getPageInfo({
                name:'my',
                param:{
                    invoke_method:'user_and_shop_info'
                }
            }).then(({result,response})=>{
                this.public_agent_info=result.public_agent_info||{};
                this.public_user_info=result.public_user_info||{};
                document.title=this.public_agent_info.application_name;
                this.bindText=result.public_user_info.id_sns&&result.public_user_info.id_sns.length>15?'已绑定':'去绑定';
                console.log(this.bindText)
                this.setState({
                    key:'public_agent_info',
                    value:this.public_agent_info
                });
                this.setState({
                    key:'public_user_info',
                    value:this.public_user_info
                });
            });
        },
        /*
         * 请求失败刷新
         */
        handleRefresh(){
            this.init();
        },
        goPage(item){
            console.log(item.path)
            if(item.path){
                this.$router.push({
                    path:item.path,
                    query:{
                    }
                });
            }
        },
        handleNativeShare(platform){
            let content_param_str=Qs.stringify({
                userId:this.public_user_info.id_public_user_info,
                agentId:this.public_agent_info.id_public_agent_info,
                agentName:this.public_agent_info.agent_name
            });
            let nick_name=this.public_user_info.nick_name?this.public_user_info.nick_name:'用户';
            let agent_name=this.public_agent_info.agent_name;
            let weichat_img=this.public_agent_info.weichat_img;
            let url=window.location.href.replace(window.location.hash,''),
                str=url.split('/').slice(-1)[0],
                imgUrl=url.replace(str,'logo.png');
            this.$native.share({
                shareTitle:`${nick_name}邀请您注册[${agent_name}]`,
                shareDesc:`${nick_name}邀请您体验[${agent_name}]`,
                shareLink:`${window.location.href.replace(window.location.hash,'')}#/register?${content_param_str}`,
                sharePlatform:platform,
                shareIconUrl:weichat_img?weichat_img:imgUrl
            },data=>{
                console.log('分享callback',data);
            });
        },
        /*
         * 打开弹窗
         */
        show(status,key){ 
            this[key]=true;
        },
        /*
         * 关闭弹窗
         */
        close(key){
            this[key]=false;
        },
        /*
         * APP跳转小程序支付
         */
        goMiniProgramPay(){
            this.$store.dispatch('changeKeepAlive', 'front_page_index')
            this.$native.weChatSign(function(data) {
            })
        },
        goMiniProgramPage(item){
            if(this.isAPP){
                if(item.jumpUrl){
                    this.$native.h5AppWxProgram({
                        h5AppWxProgramUrl:item.jumpUrl,
                        h5AppWxProgramBackUrl:item.backUrl
                    }, function (data) {
                    })
                }else{
                    this.showMessage('需要设置跳转链接');
                };
            }else{
                this.showMessage('APP跳转到小程序！');
            };
        },
        checkLocalStorage(){
            var localStorage = window.localStorage;
            window.getWebCookie.getPrecmdParaCookie4App(localStorage.getItem('id_public_agent_info'));
        },
        loginout(){
            this.$native.exitLogin(function(data) {
            })
        },
        /*
         * 微信绑定
         */
        goWechart(){
            if(!this.public_user_info.id_sns||this.public_user_info.id_sns.length<=15){
                var userId=this.public_user_info.id_public_user_info;
                this.binding=this.$$loading({
                    text:'微信账号绑定中，请稍后...'
                });
                this.$native.getParameterTransfer({
                    parameter_transfer:userId
                }, function (data) {
                })
                clearTimeout(this.timer);  //清除延迟执行 
                this.timer = setTimeout(()=>{   //设置延迟执行
                    this.binding&&this.binding.close();
                    this.showToast('微信绑定失败',false);
                },6000);  
            }else{
                this.$router.push({
                    path:'/my/app/weChartBind',
                });
            }
        },
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
.mt-avatar-item{
    position:relative;
    .box{
        width:3rem;
        height:3rem;
        border:solid 2px #fff;
        margin-bottom:0.5rem;
        box-shadow:1px 1px 3px #999;
        border-radius:50%;
        overflow:hidden;
        background:#f9f9f9;
        position:relative;
    }
    p{
        line-height:1.2rem;
        color:#fff;
        font-size:0.7rem;
    }
}
.mt-user-info{
    border-top:solid 1px #e9e9e9;
    .item{
        position:relative;
        padding:0 0.5rem;
        line-height:3rem;
        font-size:0.8rem;
        border-bottom:solid 1px #e9e9e9;
        .label{
            color:#4a4a4a;
        }
        .value{
            color:#4a4a4a;
            margin-right:0.3rem;
        }
        .icon{
            color:#888;
            font-size:0.8rem;
        }
        &:last-child{
            border-top:none;
        }
        &:active{
            background:#eee;
        }
    }
}
.mt-master-container{
    position:fixed;
    z-index:11;
    background-color:rgba(0,0,0,0.5);
    left:50%;
    width:100%;
    max-width:20rem;
    top:0;
    bottom:0;
    transform:translateX(-50%);
    .mt-master-content{
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        z-index:12;
        line-height:1.2em;
        text-align:center;
        font-size:.58rem;
        color:#878787;
        background:#fff;
        border-radius:.53rem .53rem 0 0;
        .mt-master-cancel{
            padding:.64rem 0 .85rem 0;
            div{
                width:2.13rem;
                height:.21rem;
                background:#ECECEC;
                border-radius:.1rem;
            }
            
        }
    }
    .cancel{
        margin:.85rem;
        height:2.67rem;
        font-size:.85rem;
        color:#FFF;
        background:#319BFF;
        line-height:2.67rem;
        border-radius:.21rem;
    }
    .share-title{
        font-size:.75rem;
        color:#222;
    }
    .share-wrap{
        padding:1.7rem 1.7rem .64rem 1.7rem;
        .share-item{
            margin-right:1.8rem;
            font-size:.69rem;
            color:#222;
            &:last-child{
                margin-right:0;
            }
            img{
                margin-bottom:.48rem;
                display:block;
                width:2.8rem;
                height:2.8rem;
            }
            
        }
    }
    &.app_dialog-enter-active,&.app_dialog-leave-active{
        transition:all ease-out 0.3s;
		.mt-master-content{
			transition:all ease-out 0.3s;
		}
    }
    &.app_dialog-enter{
        opacity: 0;
		.mt-master-content{
			opacity: 0;
			transform: translateY(100%);
		}
    }
    &.app_dialog-enter-to,.app_dialog-leave{
        opacity: 1;
		.mt-master-content{
			opacity: 1;
			transform: translateY(0);
		}
    }
    &.app_dialog-leave-to{
        opacity: 0;
		.mt-master-content{
			opacity: 0;
			transform: translateY(100%);
		}
    }
}
</style>
